<template>
  <!--多选组-->
  <el-checkbox-group
    v-if="meta.controlType === EControlType.checkboxs"
    v-model="value"
    v-bind="$attrs"
    :id="'c' + meta.columnId"
    :name="'c' + meta.columnId"
    :clearable="clearable"
  >
    <el-checkbox
      v-for="item in optionList"
      v-bind="$attrs"
      :key="'check' + item.value"
      :label="item.value"
      :disabled="item.disabled"
    >
      {{item.label}}
    </el-checkbox>
  </el-checkbox-group>
  <template v-else >
    <!--单选组-->
    <el-radio-group
      v-model="value"
      v-bind="$attrs"
      :id="'c' + meta.columnId"
      :name="'c' + meta.columnId"
      :clearable="clearable"
    >
      <el-radio
        v-for="item in optionList"
        v-bind="$attrs"
        :key="'radio' + item.value"
        :label="item.value"
        :disabled="item.disabled"
      >
        {{item.label}}
      </el-radio>
    </el-radio-group>
    <circle-close-filled v-if="clearable"
      style="width: 1.2em; height: 1.2em; margin-top: 0px; margin-left: 5px;cursor: pointer;"
      @click.stop="myclear" 
    />
  </template>
</template>

<script setup lang="ts" generic="T extends object">
  import type { Ref } from 'vue'
  import { computed } from 'vue'
  import { EControlType, itemController, loadController } from '../map'
  import type { IFormChildProps } from '../map'

  defineOptions({
    name: 'nf-el-from-item-checkboxs',
    inheritAttrs: false,
  })
  
  // 定义 props
  const props = withDefaults(defineProps<IFormChildProps<T>>(), {
    meta: () => {
      return {
        colName: '',
        controlType: EControlType.checkboxs
      }
    },
    model: () => {
      return {} as T
    },
    clearable: true 
  })

  const { value } = itemController(props)
 
  const myclear = () => {
    if (value) {
      (value as Ref).value = null
    }
  }

  // 从后端获取数据
  const { loadDict } = loadController(props)
  loadDict()
 
</script>
